<template>
  <div class="box">
    <van-nav-bar
      title="京东注册"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="input">
      <van-cell-group inset>
        <van-field
          v-model="value"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button v-if="!flag" size="small" type="primary" @click="FaSong"
              >发送验证码</van-button
            >
            <!-- 验证码倒计时 -->
            <van-button v-if="flag" disabled size="small" type="primary">
              <div class="time">
                <van-count-down
                  :time="60000"
                  format="ss"
                  @finish="finish"
                ></van-count-down
                ><span>s后再次发送</span>
              </div>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 10px 10px">
        <van-button
          round
          block
          :disabled="value.length != 5"
          type="primary"
          @click="resigstok"
        >
          下一步
        </van-button>
      </div>
    </div>
  </div>
  <!-- <button @click="add">tijiao</button> -->
</template>

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
import { ref } from "vue";
import { useRouter } from "vue-router";
// import { useStore } from "vuex";
import { fasongyanzm, yanzhenduanxyanzm } from "../../service/regist";
let router = useRouter();
// let store = useStore();
let store =useCounterStore();
let flag = ref(false);
let value = ref("");
function onClickLeft() {
  history.back();
}
function FaSong() {
  fasongyanzm({ tel:store.tel }).then((res) => {
    if (res.data.code === "200") {
      store.chanyzm( res.data.data);
      console.log(res);
    }
  });
  //开始倒计时
  flag.value = true;
}
function resigstok() {
  //验证验证码是否ok
  yanzhenduanxyanzm({
    tel: store.tel,
    telcode:store.yanzm,
  }).then((res) => {
    console.log(res);
    if (res.data.code === "200") {
      router.push("/regist/step3");
    }
  });
}

//倒计时结束
function finish() {
  flag.value = false;
}
</script>

<style lang="scss" scoped>
.box {
  background-color: #f5f5f5;
  height: 100vh;
}
.input {
  margin: 10px;
}
.time {
  display: flex;
  justify-content: space-around;
}
</style>
